<script lang="ts" setup name="zhibo">
import { ref } from 'vue'
import FChat from './components/FChat.vue'
import FSaleList from './components/FSaleList.vue'
import FMyVideo from './components/FMyVideo.vue'
import FChart from './components/FChart.vue'
import FWrap from './components/FWrap.vue'
import { getActivityUrlApi } from '@/addon/htscrm/api'
import { useRoute } from 'vue-router'

const route = useRoute()
const active = ref('FExamine')
const detail = ref<any>({
    live_push_url: '', // 推流地址
    live_url: '', // 拉流地址
    share_url: '', // 活动链接
    qrcode: ''
})

// 菜单项数组
const menuItems = ref([
    { id: 'FSysMsg', title: '系统消息', activeKey: 'FSysMsg' },
    { id: 'FGoodsList', title: '商品', activeKey: 'FGoodsList' },
    { id: 'FExamine', title: '评论审核', activeKey: 'FExamine' }
])

// 切换菜单项
function changeMenu (item: { activeKey: string }) {
    if (item.activeKey === active.value) {
        active.value = ''
    } else {
        active.value = item.activeKey
    }
}

/**
 * 切换活动项
 * @param param0
 */
function handleChangeActive ({ val, name }: { val: boolean; name: string }) {
    if (val) {
        active.value = name
    } else {
        active.value = ''
    }
}

async function getData () {
    const res = await getActivityUrlApi(Number(route.params.id))
    detail.value = res.data
}

getData()
</script>

<template>
  <el-container>
    <el-aside class="layout-aside-left" width="400px">
      <FChat></FChat>
    </el-aside>
    <!-- <el-aside v-if="active">
      <FWrap :active="active" @change="handleChangeActive"></FWrap>
    </el-aside> -->
    <el-main>
      <FMyVideo :detail="detail"></FMyVideo>
      <!-- <div class="tabs">
        <div
          v-for="item in menuItems"
          :key="item.id"
          @click="changeMenu(item)"
          class="item"
          :class="{ active: active === item.activeKey }">
          <div class="subtitle">{{ item.title }}</div>
        </div>
      </div> -->
      <div class="charts">
        <FChart></FChart>
      </div>
    </el-main>
    <el-aside width="400px">
      <FSaleList></FSaleList>
    </el-aside>
  </el-container>
</template>

<style scoped lang="scss">
.el-container {
  font-size: 14px;
}
.el-main {
  display: flex;
  flex-direction: column;
}
.layout-aside-left {
  border-right: 1px solid #eee;
}
.tabs {
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: space-evenly;
  border-bottom: 1px solid #ccc;
  .item {
    cursor: pointer;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #3571f6;
      transform: scaleX(0);
      transition: transform 0.3s ease-in-out;
    }
  }
  .active {
    color: #3571f6;
    &::after {
      transform: scaleX(1);
    }
  }
}
.charts {
  flex: 1;
}
</style>
